<!--
 * @Description: DOM
 * @Author: ljl
 * @Date: 2024-11-08 15:44:51
 * @LastEditors: rendc
 * @LastEditTime: 2024-11-08 15:52:28
-->
 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>12-DOM演示</title>
</head>

<body>
  <div style="font-size: 30px; text-align: center;" id="tb1">课程表</div>
  <table width="800px" border="1" cellspacing="0" align="center">
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>分数</th>
      <th>评语</th>
    </tr>
    <tr align="center" class="data">
      <td>001</td>
      <td>张三</td>
      <td>90</td>
      <td>很优秀</td>
    </tr>
    <tr align="center" class="data">
      <td>002</td>
      <td>李四</td>
      <td>92</td>
      <td>优秀</td>
    </tr>
    <tr align="center" class="data">
      <td>003</td>
      <td>王五</td>
      <td>83</td>
      <td>很努力,不错</td>
    </tr>
    <tr align="center" class="data">
      <td>004</td>
      <td>赵六</td>
      <td>98</td>
      <td>666</td>
    </tr>
  </table>
  <br>
  <div style="text-align: center;">
    <input id="b1" type="button" value="改变标题内容" onclick="fn1()">
    <input id="b2" type="button" value="改变标题颜色" onclick="fn2()">
    <input id="b3" type="button" value="删除最后一个" onclick="fn3()">
  </div>
</body>
<script>
  function fn1() {
    document.getElementById('tb1').innerHTML = "学员成绩表";
  }

  function fn2() {
    document.getElementById('tb1').style = "font-size: 30px;text-align: center;color: red;"
  }

  function fn3() {
    var trs = document.getElementsByClassName('data');
    trs[trs.length - 1].remove();
  }
</script>

</html>